@{
    ViewData["Title"] = "生产领料管理";
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>生产领料管理</title>
    <script src="~/libs/scripts/jquery-3.4.1.min.js"></script>
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f5f7fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .search-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .search-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            align-items: end;
        }

        .search-item {
            display: flex;
            flex-direction: column;
        }

        .search-item label {
            margin-bottom: 5px;
            font-size: 14px;
            color: #666;
            font-weight: 500;
        }

        .search-item input,
        .search-item select {
            height: 36px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 0 12px;
            font-size: 14px;
        }

        .search-item input:focus,
        .search-item select:focus {
            border-color: #1677ff;
            box-shadow: 0 0 0 2px rgba(22,119,255,0.1);
            outline: none;
        }

        .btn-group {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .btn-primary {
            background: #1677ff;
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .btn-primary:hover {
            background: #4096ff;
        }

        .btn-secondary {
            background: white;
            border: 1px solid #e5e7eb;
            color: #666;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .btn-secondary:hover {
            border-color: #1677ff;
            color: #1677ff;
        }

        .btn-success {
            background: #52c41a;
            border: none;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }

        .btn-success:hover {
            background: #73d13d;
        }

        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .table-header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
        }

        .layui-table {
            margin: 0;
        }

        .layui-table th {
            background: #fafafa;
            font-weight: 500;
            color: #333;
        }

        .layui-table-cell {
            font-size: 13px;
        }

        .status-draft {
            color: #faad14;
            background: #fff7e6;
            border: 1px solid #ffd591;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-confirmed {
            color: #52c41a;
            background: #f6ffed;
            border: 1px solid #b7eb8f;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-completed {
            color: #1677ff;
            background: #f0f5ff;
            border: 1px solid #adc6ff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    @* <!-- 页面标题 -->
    <div class="page-header">
        <h1 class="page-title">
            <i class="layui-icon layui-icon-component"></i>
            生产领料管理
        </h1>
    </div> *@

    <!-- 搜索区域 -->
    <div class="search-container">
        <div class="search-form">
            <div class="search-item">
                <label>领料单编号</label>
                <input type="text" id="issuanceOrderCode" placeholder="请输入领料单编号">
            </div>
            <div class="search-item">
                <label>领料单名称</label>
                <input type="text" id="issuanceOrderName" placeholder="请输入领料单名称">
            </div>
            <div class="search-item">
                <label>生产工单</label>
                <input type="text" id="productionWorkOrder" placeholder="请输入生产工单">
            </div>
            <div class="search-item">
                <label>领料仓库</label>
                <input type="text" id="issuanceWarehouse" placeholder="请输入领料仓库">
            </div>
            <div class="search-item">
                <label>客户名称</label>
                <input type="text" id="customerName" placeholder="请输入客户名称">
            </div>
            <div class="search-item">
                <label>开始日期</label>
                <input type="text" id="startDate" placeholder="请选择开始日期">
            </div>
            <div class="search-item">
                <label>结束日期</label>
                <input type="text" id="endDate" placeholder="请选择结束日期">
            </div>
            <div class="search-item">
                <div class="btn-group">
                    <button type="button" class="btn-primary" onclick="searchData()">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="button" class="btn-secondary" onclick="resetSearch()">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
        <div class="table-header">
            <div class="table-title">生产领料列表</div>
            <div class="btn-group">
                <button type="button" class="btn-success" onclick="openCreateDialog()">
                    <i class="layui-icon layui-icon-add-1"></i> 新增领料单
                </button>
                <button type="button" class="btn-secondary" onclick="refreshTable()">
                    <i class="layui-icon layui-icon-refresh-1"></i> 刷新
                </button>
            </div>
        </div>
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="viewDetail({{d.id}})">
                <i class="layui-icon layui-icon-about"></i> 详情
            </button>
            <button class="layui-btn layui-btn-xs" onclick="editData({{d.id}})">
                <i class="layui-icon layui-icon-edit"></i> 编辑
            </button>
            <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteData({{d.id}})">
                <i class="layui-icon layui-icon-delete"></i> 删除
            </button>
        </div>
    </script>

    <!-- 日期格式化模板 -->
    <script type="text/html" id="dateTpl">
        {{# if (d.issuanceDate) { }}
            {{layui.util.toDateString(d.issuanceDate, 'yyyy-MM-dd')}}
        {{# } else { }}
            -
        {{# } }}
    </script>

    <script>
        layui.use(['table', 'laydate', 'layer', 'util'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var layer = layui.layer;
            var util = layui.util;

            // 初始化日期选择器
            laydate.render({
                elem: '#startDate',
                type: 'date'
            });

            laydate.render({
                elem: '#endDate',
                type: 'date'
            });

            // 初始化表格
            var tableIns = table.render({
                elem: '#dataTable',
                url: '/ProductionSystem/ProductionMaterial/GetList',
                page: true,
                limit: 10,
                limits: [10, 20, 50, 100],
                loading: true,
                height: 'full-200',
                cellMinWidth: 80,
                even: true,
                cols: [[
                    { type: 'numbers', title: '序号', width: 60, align: 'center', fixed: 'left' },
                    { field: 'issuanceOrderCode', title: '领料单编号', width: 150, align: 'center' },
                    { field: 'issuanceOrderName', title: '领料单名称', width: 150, align: 'center' },
                    { field: 'issuanceDate', title: '领料日期', width: 120, align: 'center', templet: '#dateTpl' },
                    { field: 'issuanceWarehouse', title: '领料仓库', width: 120, align: 'center' },
                    { field: 'productionWorkOrder', title: '生产工单', width: 150, align: 'center' },
                    { field: 'customerCode', title: '客户编码', width: 120, align: 'center' },
                    { field: 'customerName', title: '客户名称', width: 150, align: 'center' },
                    { field: 'productionTask', title: '生产任务', width: 120, align: 'center' },
                    { field: 'workstation', title: '工作站', width: 100, align: 'center' },
                    { field: 'remark', title: '备注', width: 150, align: 'center' },
                    { title: '操作', width: 200, align: 'center', templet: '#operationTpl', fixed: 'right' }
                ]],
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                where: getSearchParams(),
                done: function (res, curr, count) {
                    console.log('表格数据加载完成', res);
                },
                error: function (res, msg) {
                    console.error('表格数据加载失败', res, msg);
                    layer.msg('数据加载失败：' + msg, { icon: 2 });
                }
            });

            // 获取搜索参数
            function getSearchParams() {
                return {
                    issuanceOrderCode: $('#issuanceOrderCode').val(),
                    issuanceOrderName: $('#issuanceOrderName').val(),
                    productionWorkOrder: $('#productionWorkOrder').val(),
                    issuanceWarehouse: $('#issuanceWarehouse').val(),
                    customerName: $('#customerName').val(),
                    startDate: $('#startDate').val(),
                    endDate: $('#endDate').val()
                };
            }

            // 搜索数据
            window.searchData = function () {
                tableIns.reload({
                    where: getSearchParams(),
                    page: { curr: 1 }
                });
            };

            // 重置搜索
            window.resetSearch = function () {
                $('#issuanceOrderCode').val('');
                $('#issuanceOrderName').val('');
                $('#productionWorkOrder').val('');
                $('#issuanceWarehouse').val('');
                $('#customerName').val('');
                $('#startDate').val('');
                $('#endDate').val('');
                tableIns.reload({
                    where: {},
                    page: { curr: 1 }
                });
            };

            // 刷新表格
            window.refreshTable = function () {
                tableIns.reload();
            };

            // 打开新增对话框
            window.openCreateDialog = function () {
                layer.open({
                    type: 2,
                    title: '新增生产领料',
                    skin: 'layui-layer-rim',
                    area: ['900px', '600px'],
                    maxmin: true,
                    content: '/ProductionSystem/ProductionMaterial/Create',
                    end: function () {
                        tableIns.reload();
                    }
                });
            };

            // 查看详情
            window.viewDetail = function (id) {
                layer.msg('查看详情功能待实现', { icon: 0 });
            };

            // 编辑数据
            window.editData = function (id) {
                layer.open({
                    type: 2,
                    title: '编辑生产领料',
                    skin: 'layui-layer-rim',
                    area: ['900px', '600px'],
                    maxmin: true,
                    content: '/ProductionSystem/ProductionMaterial/Edit?id=' + id,
                    end: function () {
                        tableIns.reload();
                    }
                });
            };

            // 删除数据
            window.deleteData = function (id) {
                layer.confirm('确定要删除这条领料记录吗？', {
                    icon: 3,
                    title: '删除确认'
                }, function (index) {
                    $.ajax({
                        url: '/ProductionSystem/ProductionMaterial/Delete/' + id,
                        type: 'DELETE',
                        success: function (res) {
                            if (res.code === 0) {
                                layer.msg('删除成功', { icon: 1 });
                                tableIns.reload();
                            } else {
                                layer.msg('删除失败：' + res.msg, { icon: 2 });
                            }
                        },
                        error: function () {
                            layer.msg('删除失败，请检查网络连接', { icon: 2 });
                        }
                    });
                    layer.close(index);
                });
            };

            // 监听回车键搜索
            $(document).on('keypress', 'input', function (e) {
                if (e.which === 13) {
                    searchData();
                }
            });
        });
    </script>
</body>
</html> 